<template>
	<up-list>
		<up-empty :iconSize="150" text="当前暂无车辆" v-if="carList.length === 0"></up-empty>
		<up-list-item v-for="item in carList" :key="item.id">
			<up-cell :title="item.licensePlateNumber" isLink @click="goCarInfo(item)"></up-cell>
		</up-list-item>
	</up-list>
	<div class="btn_box">
		<up-button type="primary" @click="addCar">+添加车辆</up-button>
	</div>
	<up-toast ref="uToastRef"></up-toast>
</template>

<script setup>
import { nextTick, reactive, ref } from 'vue'
import { getCarList } from '@/api/car.js'
import { onShow } from '@dcloudio/uni-app'

/* 数据 */
const uToastRef = ref(null)
const carList = reactive([])


/* 函数 */
const addCar = () => {
	uni.navigateTo({
		url: '/package_mine/pages/car/addCar'
	})
}
// 获取车辆列表
const getCars = async () => {
	uToastRef.value.show({
		message: '正在获取车辆列表',
		type: 'loading',
		duration: -1
	})
	let res = await getCarList({ limit: 100 })
	uToastRef.value.hide()
	if (res.success) {
		carList.push(...res.data.list)
	}
}
// 跳转车辆详情
const goCarInfo = (item) => {
	uni.navigateTo({
		url: '/package_mine/pages/car/carInfo?id=' + item.id
	})
}
// 初始化封装
const init = async () => {
	carList.length = 0
	await getCars()
}


/* 钩子 */
onShow(async () => {
	await nextTick()
	await init()
})
</script>

<style lang="scss" scoped>
.btn_box {
	position: fixed;
	bottom: 20px;
	left: 5%;
	width: 90%;
	z-index: 100;
}
</style>